<template>
    <div class="bg">
        <div class="body">
            <div class="codeBody2" v-show="imgDone">
                <img src="" alt="" class="log-re"/>
            </div>
            <div class="codeBody" ref="share" v-show="!imgDone">
                <div class="log">
                    <!--<img src="../../assets/img/avator.jpg" alt="">-->
                    <img :src="avatarBase64">
                    <div class="logi">
                        <p class="p1">{{systemData.name}}</p>
                        <p class="p2">聚合商城</p>
                    </div>
                </div>
                <div class="name">长按保存图片</div>
                <img :src="avatarBase" class="code"/>
            </div>
            <div class="btn" @click="popRoute">
                <p class="p1">回首页</p>
            </div>
        </div>
    </div>
</template>

<script>
    import {commonMixin, sysMixin, wxMixin} from '@/common/mixin';
    import API from '../../request/api';
    import html2canvas from 'html2canvas';
    import {isIOS} from '@/common/utils';

    export default {
        data() {
            return {
                size: 175,
                val: '',
                imgDone: false,
                avatarBase64: '',
                avatarBase: '',
                picBase64: ''
            };
        },
        mixins: [commonMixin, sysMixin, wxMixin],
        computed: {
            avatar() {
                return this.systemData.pic ? this.systemData.pic : '';
            },
        },
        watch: {
            // 监听具体数据变化，并做相应的处理
        },
        methods: {
            popRoute() {
                this.$router.push('front');
            },
            _getBase64(url) {
                if (!url) {
                    return '';
                }
                return this.request.get(API.picbase64, {url: url});
            },
            formatBase64Src(base64) {
                return `data:image/png;base64,${base64}`;
            },
            domToImg() {
                let shareNode = this.$refs.share;
                const options = {scrollY: 0, useCORS: true};
                setTimeout(() => {
                    html2canvas(shareNode, options).then((canvas) => {
                        let img = document.querySelector('.log-re');
                        img.src = canvas.toDataURL();
                        this.imgDone = true;
                        // this.downloadFile(`分享${this.product.name}.png`, canvas.toDataURL());
                    });
                }, 20);
            },
            async conversion() {
                //获取base64编码 解决移动端跨域问题
                try {
                    if (isIOS()) {
                        // iphone
                        this.val = 'http://aryv3.oss-cn-beijing.aliyuncs.com/static/iphone.png';
                    } else {
                        this.val = 'http://aryv3.oss-cn-beijing.aliyuncs.com/static/android.png';
                    }
                    let [avatarResult] = await Promise.all([this._getBase64(this.systemData.pic)]);
                    this.avatarBase64 = this.formatBase64Src(avatarResult.content);
                    let [valResult] = await Promise.all([this._getBase64(this.val)]);
                    this.avatarBase = this.formatBase64Src(valResult.content);
                } catch (e) {
                }
                this.$nextTick(() => {
                    this.domToImg();
                }, 20);
            }
        },
        beforeCreate() {
            // 可以在这加个loading事件，在加载实例时触发
            // 这个阶段实例的data、methods是读不到的
        },
        created() {
            //    判断iphone或android

        },
        beforeMount() {
            // 相关的 render 函数首次被调用。
        },
        mounted() {
            this.conversion();
            // 挂载元素，获取到DOM节点
            // el选项的DOM节点 被新创建的 vm的el 替换，并挂载到实例上去之后调用此生命周期函数。此时实例的数据在DOM节点上进行渲染
        },
        beforeRouteEnter(to, from, next) {
            // 修复iOS版微信h5 History兼容性问题
            if (isIOS() && to.path !== location.pathname) {
                location.assign(to.fullPath); // 此处不可使用location.replace
            } else {
                next();
            }
        },
        beforeUpdate() {
            // 数据更新时调用，但不进行DOM重新渲染，在数据更新时DOM没渲染前可以在这个生命函数里进行状态处理
        },
        updated() {
            //  如果对数据统一处理，在这里写上相应函数
            // 这个状态下数据更新并且DOM重新渲染，当这个生命周期函数被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。当实例每次进行数据更新时updated都会执行
        },
        beforeDestroy() {
            // 可以做一个确认停止事件的确认框
        },
        destroyed() {
            // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁
        }
    };

</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import '~assets/main.styl'
    .bg {
        height 100vh
        padding-top vh(60)
        box-sizing: border-box;
        background main-liner

        .body {
            width 79vw
            margin 0 auto
            color gray3
            overflow hidden

            .codeBody2 {
                /*border-radius main-radius*/
                background-color grayF

                .log-re {
                    width 80vw
                }
            }

            .codeBody {
                border-radius main-radius
                background-color grayF
                font-size word16
                padding 8vw 13vw

                .log {
                    height 30vw
                    flex-x(center)

                    img {
                        width vw(68)
                    }

                    .logi {
                        height 12vw
                        flex-y(space-between, flex-start)
                        padding-left 3vw

                        .p2 {
                            word-vw(word12, gray3)
                        }
                    }
                }

                .userPic {
                    width vw(45)
                    height vw(45)
                    border-radius vw(30)
                    margin 0 auto
                    display: block;
                }

                .name {
                    margin vw(10) 0
                    text-align center
                    word-vw(word14, gray3)
                }

                .code {
                    text-align center
                    width 100%
                    height auto
                }

                .des {
                    text-align center
                    margin-top vw(20)
                    line-height 1.2
                }
            }

            .btn {
                width vw(174)
                height vw(24)
                border 1px solid grayF
                border-radius all-radius
                flex-x(center)
                margin vw(24) auto

                .p1 {
                    word-vw(word14, grayF)
                }
            }
        }
    }
</style>
